const tbody = document.querySelector('tbody');
// 封装
function getone() {
    axios
        .get('/score/list')
        .then((v) => {
            if (v.data.code == 0) {
                // 获取数据
                const obj = v.data.data
                let html = ''
                // 遍历拼接
                for (const key in obj) {
                    // 遍历拼接5次成绩
                    const database = obj[key].score.reduce((h, w, i) => h + `<td class="score">${w}
                      <input data-id=${key} data-batch=${i + 1} type=text /></td>`, '')
                    html += `<tr>
                   <th scope="row">${key}</th>
                   <td>${obj[key].name}</td>
                   ${database}
                   </tr>`
                }
                // 内容输出
                tbody.innerHTML = html
                // 绑定失去焦点事件、、获取dom
                const scoreall = document.querySelectorAll('tbody input');
                // 遍历绑定事件
                scoreall.forEach((input) => {
                    // 失去焦点事件
                    input.addEventListener("blur", function () {
                        const data = {
                            // 学员id
                            stu_id: input.dataset.id,
                            //学员次数
                            batch: input.dataset.batch,
                            //分数
                            score: input.value,
                        }
                        console.log(data);
                        axios.post('/score/entry', data)
                            .then((v) => {
                                // 如果添加成功就弹窗
                                if (v.data.code === 0) {
                                    toastr.success(v.data.message)
                                    // 获取最新数据
                                    getone()
                                }
                            })

                    })

                })

            }
        })
}

// 调用
getone()

// 绑定双击事件、、事件件委托
tbody.addEventListener("dblclick", function (e) {
    // 如果双击的 是td标签且类名为score就执行
    if (e.target.nodeName === 'TD' && e.target.classList.contains('score')) {
        const input = e.target.querySelector('input');
        // 双击后显示
        input.style.display = 'block';
        // 显示原来文本
        input.value = e.target.innerText
        // 获取焦点
        input.focus()
    }
})